
<section class="todoapp">
    <!-- header -->
    <header class="header">
      <h1>todos</h1>
      <input 
        class="new-todo"
        [(ngModel)] = "fillTodo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"
        (keyup.enter)="addTodo(fillTodo)"
      >
    </header>
    <!-- main section -->
    <section class="main" *ngIf="todoList.length">
      <input class="toggle-all" id="toggle-all"
        type="checkbox"
        [checked]="allChecked"
        (change)="changeAllTodo(allChecked)"
      >
      <label for="toggle-all"></label>
      <ul class="todo-list">
        <li class="todo" [ngClass]="{'completed' : todo.done,'editing' : todo.editing}" *ngFor="let todo of filterTodoList">
          <div class="view">
            <input class="toggle"
              type="checkbox"
              [checked]="todo.done"
              (change)="changeTodoStatus(todo)"
             >
            <label (dblclick)="changeTodoEditing(todo)">{{todo.text}}</label>
            <button class="destroy" (click)="deleteTodo(todo)"></button>
          </div>
          <input 
            class="edit" 
            [value]="todo.text"
            (blur)="changeTodoContent(todo)"
            [(ngModel)] = "todo.editText"
            (keyup.enter)="changeTodoContent(todo)"
            (keyup.esc)="noChangeTodoContent(todo)"
          >
        </li>
      </ul>
    </section>
    <!-- footer -->
    <footer class="footer" *ngIf="todoList.length>0">
      <span class="todo-count">
        <strong>{{remainTodoList.length}}</strong>
        items left
      </span>
      <ul class="filters">
        <li *ngFor="let filter of filters">
          <a [ngClass]="selectFilter == filter ? 'selected' : ''" (click)="choseFilter(filter)">
            {{filter}}
          </a>
        </li>
      </ul>
      <button 
        class="clear-completed" 
        *ngIf="todoList.length > remainTodoList.length"
        (click)="clickCompleted()"
      >
        Clear completed
      </button>
    </footer>
  </section>